<template>
	<view>
		<u-popup :show="show" :round="10" mode="bottom" @close="close" :closeable="true">
			<view class="puopd_view">
				<image src="@/static/images/avater.png" mode="" class="bg1"></image>
				<view class="puopd_button" v-if="iShlogin == false" @click="getlogin">
					授权并登录
				</view>
				<button class="puopd_button" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber"
					placeholder-class="perfect_names_input" v-else>
					<span>手机号授权</span>
				</button>
				<view class="xieyi_view">
					<image src="https://fangduoduo-1328761458.cos.ap-nanjing.myqcloud.com/mini_program/weixunz.png" mode="" class="weixunz" v-if="is_xieyi == false"
						@click="selectevent"></image>
					<image src="https://fangduoduo-1328761458.cos.ap-nanjing.myqcloud.com/mini_program/yxz_icon.png" mode="" class="weixunz" v-else @click="selectevent">
					</image>
					我已阅读并同意<text class="text1" @click="getagreement(0)">《用户协议》</text>与<text class="text1"
						@click="getagreement(1)">《隐私条款》</text>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: ['show'],
		name: "login",
		data() {
			return {
				is_xieyi: false,
				iShlogin: false,
				codess: 0,
				details: {},
				openids:''
			};
		},
		onLoad() {

		},
		methods: {
			//点击确认协议
			selectevent() {
				this.is_xieyi = this.is_xieyi ? false : true
			},
			//授权登录
			getlogin() {
				var that = this;
				if (that.is_xieyi) {
					uni.showLoading({
						title: '加载中',
						mask: true,
					});
					uni.getUserInfo({
						provider: 'weixin',
						lang: 'zh_CN',
						success: res => {
							uni.login({
								provider: 'weixin',
								success: resq => {
									uni.hideLoading()
									if (resq.errMsg == "login:ok") {
										that.codess = resq.code
										that.iShlogin = true;
									} else {
										uni.showToast({   
											icon: 'none', //图标
										});
									}
								}
							});
						},
						fail: err => {}
					});
				} else {
					uni.showToast({
						title: '请勾选用户协议',
						icon: "none"
					})
				}

			},
			//微信授权登录
			async getlogins() {
				var that = this;
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
				let data = await that.$api.wxlogin({
					code: that.codess,
					encryptedData:that.details.encryptedData,
					iv:that.details.iv,
				});
				uni.hideLoading()
				if (data.code == 200) {
					uni.setStorageSync('token', data.data)
					that.$parent.login = 1
					that.$emit('closepage')
					that.$emit('payment-success');
				} else {
					uni.showToast({
						title: data.msg,
						icon: "none"
					})
				}
			},
			//手机号授权
			getPhoneNumber(e) {
				let that = this
				if (e.detail.errMsg == "getPhoneNumber:ok") {
					that.details = e.detail
					that.getlogins();
				}
			},
			close() {
				this.$emit('closepage')
			},
			//跳转用户协议
			getagreement(type) {
				if(type == 1){
					uni.navigateTo({
						url: '/pages/yinsi_agreement'
					})
				}else{
					uni.navigateTo({
						url: '/pages/user_agreement'
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.puopd_view {
		width: 100%;
		@include flex(flex-start, center, column);

		.bg1 {
			width: 128rpx;
			height: 128rpx;
			border-radius: 50%;
			margin-top: 48rpx;
		}

		.puopd_button {
			width: 632rpx;
			height: 88rpx;
			/* 自动布局 */
			@include flex(center, center, row);
			border-radius: 498rpx;
			background: #04BE84;
			 
			font-size: 30rpx;
			 
			 
			text-align: center;
			 
			 
			color: #FFFFFF;
			margin-top: 48rpx;
		}

		.puopd_coumnrts {
			 
			font-size: 30rpx;
			 
			 
			 
			 
			color: #08112C;
			@include flex(center, center, row);
			margin-top: 20rpx;

			.right_icon {
				width: 32rpx;
				height: 32rpx;
				margin-left: 8rpx;
			}
		}

		.xieyi_view {
			@include flex(center, center, row);
			margin-top: 76rpx;
			margin-bottom: 50rpx;

			.weixunz {
				width: 40rpx;
				height: 40rpx;
				margin-right: 12rpx;
			}

			 
			font-size: 24rpx;
			 
			 
			text-align: center;
			 
			 
			color: #08112C;

			.text1 {
				 
				font-size: 24rpx;
				 
				 
				text-align: center;
				 
				 
				color: #04BE84;
			}
		}
	}
</style>